<template>
  <div class="block">
    <div class="analysis-box">
      <div class="analysis-query">
        <el-select v-model="queryData.stationName" placeholder="请选择站点" style="width: 140px" class="filter-item">
          <el-option v-for="(item, index) in stationNameOptions" :key="index" :label="item" :value="item" />
        </el-select>

        <el-date-picker :clearable="false" v-model="value1" type="daterange" style="width: 250px" placeholder="选择开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="startChange" placement="bottom-start"></el-date-picker>
        <!-- <el-date-picker :clearable="false" v-model="queryData.endTime" type="date" style="width: 140px" placeholder="选择结束时间" :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="endChange" placement="bottom-start"></el-date-picker> -->

        <el-button type="success" class="reset" @click="reset">重置</el-button>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </div>

      <el-table v-loading="listLoading" :data="rcvTableData" border fit height="600">
        <el-table-column label="序号" prop="id" align="center" width="60">
          <template slot-scope="scope">
            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="站名" width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.stationName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="车辆号" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.CLH }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="出发时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.sendTime }}</span>
          </template>
        </el-table-column>-->

        <el-table-column label="到达时间" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.arriveTime }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="货运上报的入线时间" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.freightInZhuanyongTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="货运上报的出线时间" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.freightOutZhuanyongTime }}</span>
          </template>
        </el-table-column> -->

        <!-- <el-table-column label="入线时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.inZhuanyongTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="出线时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.outZhuanyongTime }}</span>
          </template>
        </el-table-column>-->

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="text" @click="openEdit(scope.row)">编辑</el-button> -->
            <el-button type="text" @click="checkEdit(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background layout="total, sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize" :page-sizes="[10, 50, 100, 200, 500]" :total="total" :current-page="currentPage" align="center"></el-pagination>
    </div>

    <el-dialog title="修改货运上报的入/出线时间" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="货运上报的入线时间" :label-width="formLabelWidth">
          <el-date-picker v-model="inZhuanyongTime" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change="ruxianChange" placement="bottom-start"></el-date-picker>
        </el-form-item>
        <el-form-item label="货运上报的出线时间" :label-width="formLabelWidth">
          <el-date-picker v-model="outZhuanyongTime" type="datetime" @change="chuxianChange" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" placement="bottom-start"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="modify">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :center="true" title="展示轨道" :visible.sync="checkShow">
      <div>车号:{{ checkch }} ▬▬▬▬▬➤{{ gdstr }}</div>
      <!-- {{checkGd}}
      <div v-for="element in checkGd" :key="element">{{ element }}</div>-->
    </el-dialog>
  </div>
</template>

<script>
import { getStationNames } from '@/api/dataQuery'
import { getFreightTime, postFreightTime } from '@/api/statistics'
import dayjs from 'dayjs'
import './index.scss'
export default {
  data() {
    return {
      queryData: {
        stationName: '',
        startTime: dayjs().format('YYYY-MM-DD 00:00:00'),
        endTime: dayjs().format('YYYY-MM-DD 23:59:59')
      },
      value1: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')],
      listLoading: false,
      tableKey: 0,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      stationNameOptions: [],
      rcvTableData: [],
      inZhuanyongTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      outZhuanyongTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      formLabelWidth: '100',
      editIdx: 0,
      dialogFormVisible: false,
      checkShow: false,
      checkch: '',
      checkGd: [],
      gdstr: ''
    }
  },
  created() {
    this.getAllStationNames()
  },
  mounted() {},
  computed: {
    pickerOptions() {
      let _this = this
      return {
        disabledDate(time) {
          if (_this.queryData.startTime) {
            return time.getTime() < new Date(_this.queryData.startTime).getTime()
          } else {
            return false
          }
        }
      }
    }
  },
  watch: {},
  methods: {
    modify() {
      this.postFreightTimeInfo()
      // this.dialogFormVisible = false
    },
    openEdit(idx) {
      this.dialogFormVisible = true
      this.editIdx = idx.id
    },
    ruxianChange(val) {
      this.inZhuanyongTime = val
    },
    chuxianChange(val) {
      this.outZhuanyongTime = val
    },
    startChange(val) {
      this.queryData.startTime = val[0] + ' 00:00:00'
      this.queryData.endTime = val[1] + ' 23:59:59'
      // this.queryData.startTime = val + ' 00:00:00'
    },
    endChange(val) {
      this.queryData.endTime = val + ' 59:59:59'
    },

    checkEdit(item) {
      this.checkShow = true
      this.checkch = item.CLH

      let gudaoArr = item.trainRunTrajectoryList
      let newGudao = gudaoArr.map(ele => {
        return `股道:${ele.gdName}`
      })
      let resultstr = newGudao.join('   ▬▬▬▬▬➤   ')
      this.gdstr = resultstr
      this.checkGd = gudaoArr
    },
    getTableData(newObj) {
      let obj = {
        page: this.currentPage,
        size: this.pageSize,
        obj: newObj
      }
      getFreightTime(obj).then(res => {
        if (res.code == 0) {
          this.rcvTableData = res.data.records
          this.total = res.data.total
        } else {
          this.rcvTableData = []
          this.total = 0
          this.$message(res.msg)
        }
      })
    },

    getAllStationNames() {
      getStationNames().then(res => {
        if (res.code == 0) {
          this.stationNameOptions = res.data
          this.queryData.stationName = res.data[0]
          let newobj = this.queryData
          this.getTableData(newobj)
        } else {
          this.listLoading = true
          this.$message('暂无数据')
        }
      })
    },
    postFreightTimeInfo() {
      let obj = {
        id: this.editIdx,
        inZhuanyongTime: this.inZhuanyongTime,
        outZhuanyongTime: this.outZhuanyongTime
      }
      postFreightTime(obj).then(res => {
        if (res.code === 0) {
          this.$message.success('修改成功！')
          this.dialogFormVisible = false
        } else {
          this.dialogFormVisible = true
        }
      })
    },
    reset() {
      this.queryData.startTime = dayjs().format('YYYY-MM-DD 00:00:00')
      this.queryData.endTime = dayjs().format('YYYY-MM-DD 23:59:59')
      this.currentPage = 1
      this.pageSize = 10
      this.value1 = [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')]
      this.getTableData(this.queryData)
    },
    search() {
      this.getTableData(this.queryData)
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getTableData(this.queryData)
    },
    handleSizeChange: function(size) {
      this.pageSize = size
      this.getTableData(this.queryData)
    }
  }
}
</script>
